<template>
  <div>
    <WebHeader/>
    <!--    横幅区域-->
    <div id="pic">
      <div>
        <h3>{{ title }}</h3>
        <p style="font-size: 15px;text-align: center">{{ titleDes }}</p>
      </div>
    </div>
    <div id="content">
      <div id="panel">
        <div class="card" v-for="(file,index) in files" :key="index">

          <router-link :to="{path:file.fileUrl,query: {id: file.id}}">
            <!--          标题图-->
            <div style="width:100%;height:156px;">
              <el-image :src="file.imgUrl" style="width: 100%;border-radius: 5px">
                <div slot="error" class="image-slot">
                  <a href="https://www.giaott.com/images/2022/10/05/jTGxS.png">
                    <el-image src="https://www.giaott.com/images/2022/10/07/jq2K7.jpg" fit="contain"/>
                  </a>
                </div>
              </el-image>
            </div>
            <!-- 标题-->
            <div style="margin-top: 15px;width: 100%">
              <p style="font-size: 19px;text-indent: 1em">
                {{ file.fileName }}
              </p>
            </div>
          </router-link>

          <!-- 阅读,收藏,评价,发表时间-->
          <div class="likeAndCol" style="font-size: 12px;width: 100%;color:rgb(120 102 102)">
            <div class="icons">
              <span><img class="icon" src="../../assets/icon/阅读量.png" alt="阅读量"> 999</span>
              <span><img class="icon" src="../../assets/icon/点赞.png" alt="点赞"> {{ file.likes }}</span>
              <span><img class="icon" src="../../assets/icon/评论.png" alt="评论">{{ file.comments }} 评论</span>
              <span><img class="icon" src="../../assets/icon/收藏.png" alt="收藏"> {{ file.collection }}收藏</span>
            </div>
          </div>
        </div>

      </div>
      <div id="comment">
        <WebAside/>
      </div>
    </div>
    <div style="margin:50px 26%">
      <el-pagination
        @current-change="changePage"
        :current-page="page.current"
        :page-sizes="[9, 10, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.records">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import WebHeader from "@//view/layout/WebHeader";
import WebAside from "@//view/layout/WebAside";
import {allFile} from "@//assets/http/request";

export default {
  name: "TopicRes",
  components: {WebAside, WebHeader},
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler() {
        this.sourceCat = this.$route.params.cat;
        this.getFile(this.sourceCat);
      }
    },
  },
  data() {
    return {
      title: '',
      titleDes: '',
      page: {
        records: 100,
        pageCount: 9,
        orders: [],
        current: 1,
        //页面大小
        size: 9,
      },
      files: [],
      sourceCat: ''
    }
  },
  methods: {
    changePage(currentPage) {
      this.page.current = currentPage;
      this.getFile();
    },
    getFile(catName) {
      allFile(this.page, catName).then(res => {
        let result = res.data.data;
        this.files = res.data.data.records;
        this.page.current = result.current;
        this.page.pageCount = result.pages;
        this.page.size = result.size;
        this.page.records = result.total;
      });
    },
    //根据路由判定主题名
    switchTitle(route1) {
      switch (route1) {
        case 'ghlr':
          this.title = "修改软件";
          this.titleDes = "本站专业修改三十年";
          break;
        case 'jqsoft':
          this.title = "惊奇软件";
          this.titleDes = '本专题主要收集颜值软件，开源软件';
          break;
        case 'softlist':
          this.title = '软件合集';
          this.titleDes = '软件聚类全家桶';
          break;
        case 'ossoft':
          this.title = '开源软件';
          this.titleDes = '开源的才是最强的';
          break;
        case 'help':
          this.title = '帮助文档';
          this.titleDes = '有什么需要帮助的吗?'
          break;
        default:
          '专题资源';

      }
    },
  },
  mounted() {
    this.getFile(this.sourceCat);
    this.switchTitle(this.$route.params.cat);
    console.log("title", this.title);
    console.log("故咋教案课件发觉离开")
  }
}
</script>

<style scoped>

a {
  color: black;
  font-weight: Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
  text-decoration: none; /*CSS下划线效果：无下划线*/
}

.likeAndCol {
  position: absolute;
  bottom: 24px;
  left: 17px
}

.icons span {
  margin-right: 15px;
}

.icon {
  width: 15px;
  margin-right: 5px;
}

.card {
  position: relative;

  width: 256px;
  height: 293px;
  background-color: white;
  padding: 15px 10px 15px 10px;
  margin: 25px 30px;

  /*border: 1px solid #505050;*/
  border-radius: 5px;

}

.card:hover {
  /*box-shadow: 2px 11px 27px 7px #9a9696;*/
  transform: translateY(-9px);
}

#content {
  position: relative;
  margin-left: 210px;
  margin-top: 25px;
}

#panel {
  display: flex;

  width: 1110px;
  flex-wrap: wrap;
  justify-content: space-around;


  /*background-color: #ffb4b4;*/
}


#comment {
  position: absolute;
  top: -4px;
  right: 207px;
}

#pic {
  display: flex;
  height: 500px;
  width: 100%;

  justify-content: center;

  align-items: center;
  background-image: url("https://www.giaott.com/images/2022/10/06/jheIf.jpg");
  background-size: cover;
}
</style>
